<template>
  <div class="noticeSystem">
    <div class="all-info-c-h">
      <input type="checkbox" v-model="checkAll" autocomplete="off" @click="infoSelAll()">
      <span>全选</span>
      <button @click="readSiteNotice()">标记已读</button>
      <button @click="removeSiteNotice()">批量删除</button>
      <input type="text" v-model="searchData.receiverAccount" class="znxx-sea" placeholder="用户名搜索">
      <button class="info-h-sec" @click="searchEvent()">搜索</button>
    </div>

    <div v-if="total" class="all-info-c-lis xxzx-znxx-lis">
      <ul id="info-lis">
        <li v-for="(item, index) in noticeData.list" :key="index">
          <input type="checkbox" v-model="item.check" autocomplete="off" name="infosel">
          <img v-if="item.readStatus === 0" src="../../assets/wd-info.png" name="infotip">
          <img v-if="item.readStatus === 1" src="../../assets/yd-info.png" name="infotip">
          <a href="javascript:void(0)">
            <span class="xxzx-znxx-photo">
              <img v-if="/^[0-9]$/.test(item.avatar)" :src="`static/img/avatar${item.avatar}.png`">
              <img v-else :src="item.avatar">
            </span>
          </a>
          <span class="xxzx-znxx-txt">
            <a href="javascript:void(0)">
              <span class="xxzx-znxx-pep">{{item.senderAccount+'：'}}</span>
            </a>
            <span style="vertical-align: bottom;">{{item.messageContent}}</span>
            <p>
              共
              <i>{{item.num}}</i>条对话
              <a href="javascript:void(0)" @click="$router.push('/noticeSend/index?id='+item.messageId)">回复</a>
            </p>
          </span>
          <span class="info-time">{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </li>
      </ul>
    </div>
    <div v-if="!noticeData.list.length&&!loading" style="padding: 40px;text-align: center;font-size: 16px;color: #999;">
            暂无内容
          </div>
    <!--** 分页 ***-->
    <laypage v-if="total" :pageSize.sync="pageSize" :total="total" :pageNum.sync="pageNum" @changePage="getSiteMessage"></laypage>
    <!--** 分页 end ***-->
  </div>
</template>
<script>
import * as api from '@/service/api'
import Laypage from '@/components/laypage'
export default {
  data () {
    return {
      loading: false,
      pageSize: 10,
      pageNum: 1,
      total: null,
      checkAll: false,
      globalThis: null,
      searchData: {},
      noticeData: {
        list: []
      }
    }
  },
  components: {
    Laypage
  },
  created () {
    this.globalThis = window
    this.pageNum = 1
    this.getSiteMessage()
  },
  computed: {
    curFresh () {
      return this.$store.state.curFresh
    }
  },
  watch: {
    curFresh (val) {
      this.getSiteMessage()
    }
  },
  methods: {
    async getSiteMessage (page) {
      this.loading = true
      if (page) {
        this.pageNum = page
      }
      try {
        let res = await api.getSiteMessage({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          ...this.searchData
        })
        this.noticeData = res.data
        this.total = this.noticeData.total
        this.noticeData.list.map((item) => {
          item.check = false
        })
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    searchEvent () {
      this.pageNum = 1
      this.getSiteMessage()
    },
    async readSiteNotice () {
      try {
        let curIds = []
        this.noticeData.list.map((item) => {
          if (item.check) {
            curIds.push(item.messageId)
          }
        })
        await api.readSiteNotice({
          ids: curIds.join(',')
        })
        this.getSiteMessage()
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async removeSiteNotice () {
      try {
        let curIds = []
        this.noticeData.list.map((item) => {
          if (item.check) {
            curIds.push(item.messageId)
          }
        })
        await api.removeSiteNotice({
          ids: curIds.join(',')
        })
        this.getSiteMessage()
      } catch (e) {
        console.log(e)
      }
    },
    infoSelAll () {
      if (!this.checkAll) {
        this.noticeData.list.map((item) => {
          item.check = true
        })
      } else {
        this.noticeData.list.map((item) => {
          item.check = false
        })
      }
    }
  }
}
</script>
<style lang="scss">
.noticeSystem {
  .no-list {
    padding: 30px;
    text-align: center;
    color: #b2b2b2;
  }
}
</style>
